<script setup>
import { ref, onMounted } from 'vue';
import { useClusterStore } from '@/stores/cluster';
import { getAllJobs, cancelJob } from '@/api/flink';
import { showSuccessToast, showFailToast } from 'vant';

const clusterStore = useClusterStore();
const loading = ref(false);
const jobs = ref([]);

// 获取作业列表
const loadJobs = async () => {
  try {
    loading.value = true;
    const clusterId = clusterStore.currentCluster?.id;
    if (!clusterId) {
      throw new Error('请先选择集群');
    }
    jobs.value = await getAllJobs(clusterId);
  } catch (error) {
    showFailToast(error.message);
  } finally {
    loading.value = false;
  }
};

// 取消作业
const handleCancelJob = async (jobId) => {
  try {
    const clusterId = clusterStore.currentCluster?.id;
    await cancelJob(clusterId, jobId);
    showSuccessToast('取消作业成功');
    await loadJobs(); // 刷新列表
  } catch (error) {
    showFailToast(error.message);
  }
};

onMounted(() => {
  loadJobs();
});
</script>

<template>
  <div class="jobs-container">
    <van-pull-refresh v-model="loading" @refresh="loadJobs">
      <van-list>
        <van-cell v-for="job in jobs" :key="job.jobId" :title="job.jobName || job.jobId">
          <template #label>
            <div>状态: {{ job.state }}</div>
            <div>开始时间: {{ new Date(job.startTime).toLocaleString() }}</div>
          </template>
          <template #right-icon>
            <van-button 
              v-if="job.state === 'RUNNING'"
              type="danger" 
              size="small" 
              @click="handleCancelJob(job.jobId)"
            >
              取消
            </van-button>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style scoped>
.jobs-container {
  padding: 16px;
}
</style> 